<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/sys/base :: headFragment(~{::title},~{::link},~{::style})"></head>
<body style="overflow:hidden;">
<div class="layui-card" style="margin:3px;">
    <div class="layui-card-header" style="padding:5px 5px 0;line-height:38px;">
        <div class="layui-row">
            <form id="sysRoleForm" class="layui-form layui-form-pane">
                <div class="layui-form-item" style="margin-bottom:0;">
                    <div class="layui-inline">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-inline" style="width:80px;">
                            <select class="" id="active" name="active">
                                <option value="">所有</option>
                                <option value="1">开启</option>
                                <option value="2">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-inline" style="width:190px;">
                            <input type="text" class="layui-input" id="roleName" name="roleName" placeholder="请输入名称" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="text-align:center;">创建时间</label>
                        <div class="layui-input-inline" style="width:150px;">
                            <input type="text" class="layui-input" id="baseCreateTimeStart" name="baseCreateTimeStart" placeholder="请选择开始时间" autocomplete="off">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width:150px;">
                            <input type="text" class="layui-input" id="baseCreateTimeEnd" name="baseCreateTimeEnd" placeholder="请选择结束时间" autocomplete="off">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card-body" style="padding:0 5px 5px">
        <table class="layui-hide" id="sysRoleTable" lay-filter="sysRoleTable"></table>
    </div>
</div>

<!--头工具栏 -->
<script type="text/html" id="toolbar_head">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="search">
            <i class="fa fa-search"></i> 查询
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="refresh">
            <i class="fa fa-refresh"></i> 刷新
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="insert">
            <i class="layui-icon layui-icon-add-circle"></i> 添加
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="batchDelete">
            <i class="layui-icon layui-icon-delete"></i> 批量删除
        </button>
    </div>
</script>
<!--行工具栏 -->
<script type="text/html" id="toolbar_row">
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="authorization">授权</a>
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="update">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="delete">删除</a>
</script>
<!--模板 -->
<script type="text/html" id="activeTpl">
    <input type="checkbox" name="active" value="{{d.id}}" lay-skin="switch" lay-text="开启|禁用" lay-filter="active" {{ d.active === 1 ? 'checked' : '' }} >
</script>

<script th:replace="/sys/base :: scriptFragment"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['jquery', 'layer', 'laydate', 'table', 'form'], function () {
        var $ = layui.jquery;

        // TODO 日期选择文本框
        var laydate = layui.laydate;
        laydate.render({elem: '#baseCreateTimeStart', type: 'datetime', min: '2019-01-01 00:00:00', max: '2999-12-31 23:59:59'});
        laydate.render({elem: '#baseCreateTimeEnd', type: 'datetime', min: '2019-01-01 00:00:00', max: '2999-12-31 23:59:59'});

        // TODO 表格对象
        var table = layui.table;
        table.render({
            elem: "#sysRoleTable"
            , id: "sysRoleTable"
            , title: "角色"
            , height: top.window.layuiTabContentHeight - $(".layui-card-header").outerHeight() - 12
            , toolbar: "#toolbar_head" // 表头工具栏
            , defaultToolbar: [] // 清空默认表头工具栏
            , page: true // 开启分页
            , limit: 50
            , url: $.getProjectNameLI() + "/sys/role/page"
            , method: "post"
            , where: {author: "lixing"} // 接口的其它参数
            , request: {pageName: "basePageNum", limitName: "basePageSize"} // 对分页请求的参数：page、limit重新设定名称
            , parseData: function (res) { // 将服务器返回的数据解析成table组件所规定的数据
                return {
                    "code": res.code,
                    "msg": res.message,
                    "count": res.data.total,
                    "data": res.data.records
                };
            }
            , cols: [[ //表头
                {type: 'checkbox'}
                , {title: '序号', width: 80, type: 'numbers'}
                , {title: '名称', field: 'roleName', sort: true}
                , {title: '创建人', width: 180, field: 'createUserAccount', sort: true}
                , {title: '创建时间', width: 180, field: 'createTime', sort: true}
                , {title: '状态', width: 100, field: 'active', templet: '#activeTpl'}
                , {title: '操作', width: 200, align: 'center', toolbar: '#toolbar_row'}
            ]]
        });

        /**
         * 监听表头工具栏事件
         */
        table.on('toolbar(sysRoleTable)', function (obj) {
            var form = $("form[id='sysRoleForm']");
            var checkStatus = table.checkStatus(obj.config.id);
            var event = obj.event;
            if (event === 'search') { // TODO 查询
                table.reload('sysRoleTable', {
                    page: {curr: 1}
                    , where: form.serializeObject()
                });
            } else if (event === 'refresh') { // TODO 刷新
                form.find('input[type=text],select').each(function () {
                    $(this).val('');
                });
                table.reload('sysRoleTable', {
                    page: {curr: 1}
                    , where: form.serializeObject()
                });
            } else if (event === 'insert') {
                openSysModifyDialog('添加角色','/sys/role/toModify/null','540,360'); // TODO 添加
            } else if (event === 'batchDelete') {
                var row = checkStatus.data;
                if (row.length === 0) {
                    layer.msg("请先选择需要删除的数据", {time: 1500});
                } else {
                    var ids = [];
                    row.forEach(function (item) {
                        ids.push(item.id);
                    });
                    sysDelete("/sys/role/delete",{id: ids.join(",")}); // TODO 批量删除
                }
            }
        });

        /**
         * 监听每行工具栏事件
         */
        table.on('tool(sysRoleTable)', function (obj) {
            var data = obj.data;
            var event = obj.event;
            if (event==="authorization") {
                openSysModifyDialog('角色授权','/sys/role/toAuthorization/'+data.id,'680,600'); // TODO 授权
            } else if (event === 'update') {
                openSysModifyDialog('编辑角色','/sys/role/toModify/'+data.id,'540,360'); // TODO 编辑
            } else if (event === 'delete') {
                sysDelete("/sys/role/delete",{id: data.id}); // TODO 删除
            }
        });

        /**
         * 监听【状态】按钮
         */
        var form = layui.form;
        form.on('switch(active)', function(obj){
            sysUpdate('/sys/role/saveModify/update',{id:this.value,active:obj.elem.checked?1:2});
        });

    });
</script>
</body>
</html>